<template>
  <div v-if="visible">
    <dialog-form
      ref="dialogForm"
      width="620px"
      :title="title"
      :visible="visible"
      :form-attrs="{formData: modalFormData, renderFormItem, formButtons, labelWidth: '100px'}"
      @close="handleClose"
    />

    <el-dialog
      custom-class="map-dialog"
      append-to-body
      title="所在坐标"
      width="1000px"
      :visible="mapVisible"
      @close="handleMapClose"
    >
      <el-input v-model="address" placeholder="请输入地址来直接查找相关位置" style="margin-bottom: 20px" @keyup.enter.native="handleConfirm" />
      <baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="location" :zoom="19" @click="getLocationPoint">
        <bm-local-search :keyword="address" :auto-viewport="true" :zoom="19" style="display: none" />
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :show-address-bar="true" :auto-location="true" @locationSuccess="handleLocationSuccess" />
        <bm-marker :position="position" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
      </baidu-map>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleMapSubmit">保存</el-button>
        <el-button size="small" @click="handleMapClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { DialogForm } from '@/components'
import { modalFormItem, formButtons } from './config'

export default {
  name: 'DeviceUpdate',
  components: { DialogForm },
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      modalFormData: {}, // 弹窗表单数据

      renderFormItem: [],
      formButtons: formButtons(this.handleModalSubmit, this.handleClose),

      deviceCodeDisabled: false, // 设备号是否禁止修改

      // 地图弹窗
      mapVisible: false,
      address: '',
      position: {}, // 经纬度
      location: {
        lng: 113.274464,
        lat: 22.930752
      }
      // zoom: 18
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.deviceCodeDisabled = this.title !== '新增'
        this._createModalFormItem(this.modalFormData.deviceType !== 3)
        const { lng, lat } = this.modalFormData
        this.position = {
          lng,
          lat
        }
      }
    }
  },
  methods: {
    handleDeviceTypeChange(e) { // 设备类型改变
      let isHide = true
      if (e === 3) {
        isHide = false
      }
      this._createModalFormItem(isHide)
    },

    handleMapShow() { // 地图弹窗
      this.mapVisible = true
    },

    handleModalSubmit(values) {
      if (!this._checkFormData(values)) return false
      this.$emit('handleModalSubmit', values)
    },

    handleClose() {
      this.$emit('update:visible', false)
    },

    handleMapSubmit() {
      this.mapVisible = false
      this.$refs.dialogForm.$refs.modalForm.setFormData(this.position)
    },

    handleMapClose() {
      this.mapVisible = false
    },

    _checkFormData(data) {
      if (data.deviceType === 3 && (!data.lng || !data.lat)) {
        this.$message.warning('请选择所在坐标')
        return false
      }
      return true
    },

    _createModalFormItem(isHide) {
      this.renderFormItem = modalFormItem(this.handleDeviceTypeChange, this.handleMapShow, this.deviceCodeDisabled, isHide)
    },

    getLocationPoint(e) {
      this.lng = e.point.lng
      this.lat = e.point.lat
      // eslint-disable-next-line no-undef
      const geoCoder = new BMap.Geocoder()
      geoCoder.getLocation(e.point, res => {
        // let { address } = res
        // if (res.surroundingPois && res.surroundingPois.length) {
        //   address = res.surroundingPois[0].address ? res.surroundingPois[0].address : address
        // }
        // this.address = address
        const { point } = res
        delete point.of
        this.position = point
      })
    },
    handleLocationSuccess({ addressComponent, marker }) {
      const { province, city, district, street, streetNumber } = addressComponent
      this.address = province + city + district + street + streetNumber
      delete marker.point.of
      this.position = marker.point
    },
    handleConfirm(e) {
      // eslint-disable-next-line no-undef
      const geoCoder = new BMap.Geocoder()
      geoCoder.getPoint(this.address, point => {
        delete point.of
        this.position = point
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bm-view {
  width: 100%;
  height: 600px;
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>
